import React from 'react';
import { WeaOrgTree, WeaTop, WeaTab, WeaLocaleProvider, WeaAlertPage, WeaNewScroll } from 'ecCom';
import { Spin } from "antd"
import TeamHome from './TeamHome';
import ExecAssess from './ExecAssess';
import RiskManage from './RiskManage';
import { i18n } from "../../../public/i18n";
import * as Util from '../../../util/Util';
import * as teamPortraitApis from '../../../apis/portrait/teamPortrait';

const getLabel = WeaLocaleProvider.getLabel;

export default class TeamPortraitIndex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isloading: false,
            subId: '', // 目标分部id
            deptId: '', // 目标部门id
            subDeptName: '', // 目标分部或者部门名称
            includeSub: false, // 包含下级机构
            canView: false,     // 是否可以查看目标部门或者分部的团队画像
            topDropMenuDatas: [
                // {
                //     key: "2",
                //     disabled: false,
                //     icon: <i className="icon-search" />,
                //     content: "搜索",
                //     onClick: key => alert(`点击了搜索 key = ${key}`)
                // }
            ],
            topTabs: [
                {
                    title: getLabel('522375', '团队首页'),
                    viewcondition: '1',
                },
                {
                    title: getLabel('522293', '执行力评测'),
                    viewcondition: '2',
                },
                {
                    title: getLabel('25120', '风险管理'),
                    viewcondition: '3',
                },
            ],
            selectedTopTabKey: '1',
        };
    }

    componentWillMount() {
        this.getViewRight(null, "2")
    }

    getViewRight = (id, type) => {
        this.setState({
            isloading: true
        })
        teamPortraitApis.getViewRight({
            id: id || "",
            type
        }).then(res => {
            if (res.status == "1") {
                this.setState({
                    isloading: false,
                    canView: res.canView,
                    subId: type == "1" ? res.id : "",
                    deptId: type == "2" ? res.id : "",
                    subDeptName: res.name
                })
                // document.title = this.getTitle(res.name)
            }
        })
    }

    onTreeNodeClick = (e) => {
        const targetNode = e.selectedNodes[0];
        const { id, name, type } = targetNode.props; // type  1=分部  2=部门
        if (type == "1" || type == "2") {
            this.getViewRight(id, type)
        }
    }

    getTitle = (subDeptName) => {
        return subDeptName ? getLabel('522376', '${subDeptName}的画像').replace('${subDeptName}', subDeptName) : getLabel('522867', '团队画像')
    }

    render() {
        const { topDropMenuDatas, topTabs, selectedTopTabKey, includeSub, subId, deptId, subDeptName, canView, isloading } = this.state;
        const mainContentHeight = Util.getCurrentHeight() - 110

        return (
            <div className="wea-workrelate-team-portrait-index">
                <div className="left-orgtree">
                    <div className="tree-head">{getLabel('83179', '行政组织')}</div>
                    <div className="tree-content" style={{ height: Util.getCurrentHeight() - 55}}>
                        <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@os4e94`} expandAllChildrenOnSearch isLoadSubDepartment noCache needSearch inputLeftDom={getLabel('25332', '组织结构')} needDropMenu={false} treeNodeClick={this.onTreeNodeClick} />
                        <span className="sub-flag-icon" title={includeSub ? getLabel('33454', '包含下级机构') : getLabel('390067', '不包含下级机构')} onClick={() => this.setState({ includeSub: !includeSub })}><i className={includeSub ? 'icon-coms-DisplaySubordinates' : 'icon-coms-NoDisplayOfSubordinates'} style={{ color: includeSub ? '#56CCF2' : '#333' }} /></span>
                    </div>
                </div >
                <div className="main-content-wrapper">
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5k57wy`} spinning={isloading}>
                        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@j9fh1l`} title={this.getTitle(subDeptName)} icon={<i className="icon-coms02-Portrait-of-personnel" />} iconBgcolor="#893D86" showDropIcon={true} dropMenuDatas={topDropMenuDatas} />
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@gsctsq`} datas={topTabs} keyParam="viewcondition" selectedKey={selectedTopTabKey} onChange={v => this.setState({ selectedTopTabKey: v })} />
                        <div className="chart-main-content" style={{ height: mainContentHeight }}>
                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@p0fxgd`}
                                height={mainContentHeight}
                                ref={ref => { if (ref) { ref.scrollerToTop() } }}
                            >
                                {
                                    !canView && !isloading && Util.renderAlertPage("<span style='color:red'>" + i18n.message.authFailed() + "</span>", "", "30%", mainContentHeight,this.props.ecId || '')
                                }
                                {
                                    canView &&
                                    <div className="chart-main-content-abs">
                                        {
                                            selectedTopTabKey == '1' && <TeamHome ecId={`${this && this.props && this.props.ecId || ''}_TeamHome@tjgecn`} subId={subId} deptId={deptId} includeSub={includeSub} />
                                        }
                                        {
                                            selectedTopTabKey == '2' && <ExecAssess ecId={`${this && this.props && this.props.ecId || ''}_ExecAssess@087bru`} subId={subId} deptId={deptId} includeSub={includeSub} />
                                        }
                                        {
                                            selectedTopTabKey == '3' && <RiskManage ecId={`${this && this.props && this.props.ecId || ''}_RiskManage@n3m4wx`} subId={subId} deptId={deptId} includeSub={includeSub} />
                                        }
                                    </div>
                                }
                            </WeaNewScroll>
                        </div>
                    </Spin>
                </div>
            </div>
        );
    }
}
